<template>
    <view @touchstart="handleTouchstart" @touchend="handleTouchend">
           学习触屏事件
    </view>
</template>

<script>
    export default {
        data(){
            return{
                starTime:0,
                startX:0,
                startY:0
            }
        },
        methods:{
            handleTouchstart(event){
                console.log('手指按下屏幕')
                this.starTime=Date.now()
                this.startX=event.changedTouches[0].clientX
                this.startY=event.changedTouches[0].clientY
            },
            handleTouchend(event){
                console.log('手指离开屏幕')
              const endTime=Date.now()
              const endX=event.changedTouches[0].clientX
              const endY=event.changedTouches[0].clientY

              if(endTime-this.starTime>2000){
                  return;
              }
              let direction=""
              if(Math.abs(endX-this.startX)>10){
                  direction=endX-this.startX?'right':'left'
              }else{
                  return;
              }
            }
        }
    }
</script>

<style lang="scss" scoped>
view{
    width: 100%;
    height: 500rpx;
    background-color: aqua;
}
</style>